<!--
 * @Author: zhw 443844039@qq.com
 * @Date: 2025-08-27 21:51:23
 * @LastEditors: zhw 443844039@qq.com
 * @LastEditTime: 2025-08-27 21:51:23
 * @Description: 师生沟通记录
-->
<template>
  <div class="container">
    <div class="header">
      <div class="title-wrapper">
        <div class="blue-line"></div>
        <h3>师生沟通记录</h3>
      </div>
    </div>
    <div id="chartId" ref="chartIdRef" class="echarts-box"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { studentScoreStatisticApi } from '@/api/teacherEthicsConduct'
export default {
  data() {
    return {
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartIdRef)
      studentScoreStatisticApi().then(res => {
        const xData = []
        const count = []
        res.data.forEach(item =>{
          xData.push(item.yearMonth)
          count.push(item.count)
        })
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            y:'bottom',
          },
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: `{value}次`
            }
          },
          series: [
            {
              data: count,
              type: 'line',
              itemStyle:{
                color:'#6DC8EC',
              }
            }
          ]
        };
        chart.setOption(option)
      })
    }
  }
}
</script>

<style scoped>
.container {
  padding: 16px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
  margin-bottom: 16px;
  padding-bottom: 8px;
}

.title-wrapper {
  display: flex;
  align-items: center;
}

.blue-line {
  width: 4px;
  height: 24px;
  background-color: #1E62FF;
  margin-right: 12px;
  border-radius: 2px;
}

.header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

.echarts-box{
  width: 100%;
  height: 400px;
}
</style>